import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:zootix/zt_app_theme.dart';
import 'package:zootix/screens/login/zt_login.controller.dart';
import 'package:zootix/util/zt_screen_adaper_util.dart';

class ZtLoginScreen extends StatelessWidget {
  final _controller = Get.put<ZtLoginController>(ZtLoginController());

  ZtLoginScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/background.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: _buildBody(),
      ),
    );
  }

  _buildBody() {
    return Padding(
        padding: EdgeInsets.fromLTRB(
            ZtScreenAdaper.height(30),
            ZtScreenAdaper.height(30),
            ZtScreenAdaper.width(30),
            ZtScreenAdaper.height(30)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(height: ZtScreenAdaper.height(30)),
            const Expanded(child: SizedBox()),
            Row(children: [
              Text(
                'Hello!',
                style: TextStyle(
                    fontStyle: FontStyle.italic,
                    fontSize: ZtScreenAdaper.sp(30),
                    fontWeight: FontWeight.bold),
              ),
            ]),
            SizedBox(height: ZtScreenAdaper.height(15)),
            Row(children: [
              Text(
                'Welcome to',
                style: TextStyle(
                    fontStyle: FontStyle.italic,
                    fontSize: ZtScreenAdaper.sp(35),
                    fontWeight: FontWeight.bold),
              )
            ]),
            Row(children: [
              Text(
                'Zoo Tix!',
                style: TextStyle(
                    fontStyle: FontStyle.italic,
                    fontSize: ZtScreenAdaper.sp(35),
                    fontWeight: FontWeight.bold),
              )
            ]),
            SizedBox(height: ZtScreenAdaper.height(40)),
            _buildLoginChooser(),
            SizedBox(height: ZtScreenAdaper.height(40)),
            _buildTerm(),
            SizedBox(height: ZtScreenAdaper.height(30)),
          ],
        ));
  }

  Widget _buildLoginChooser() {
    return Container(
        decoration: BoxDecoration(
            color: ZtAppTheme.white,
            borderRadius:
                BorderRadius.all(Radius.circular(ZtScreenAdaper.sp(20)))),
        child: Container(
            padding: EdgeInsets.symmetric(
                vertical: ZtScreenAdaper.height(30),
                horizontal: ZtScreenAdaper.width(20)),
            child: Column(children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                    shape: RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.circular(ZtScreenAdaper.sp(30))),
                    padding: EdgeInsets.symmetric(
                        horizontal: ZtScreenAdaper.height(25),
                        vertical: ZtScreenAdaper.height(10)),
                    backgroundColor: const Color.fromRGBO(64, 64, 64, 1)),
                child:
                    Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  Expanded(
                      child: Stack(alignment: Alignment.center, children: [
                    Positioned(
                        left: 0,
                        child: Image(
                          image:
                              const AssetImage('assets/images/apple_login.png'),
                          height: ZtScreenAdaper.width(26),
                          width: ZtScreenAdaper.width(26),
                        )),
                    SizedBox(
                      width: ZtScreenAdaper.width(30),
                      height: ZtScreenAdaper.height(40),
                    ),
                    Text(
                      'Sign in with Apple',
                      style: TextStyle(fontSize: ZtScreenAdaper.sp(18)),
                    )
                  ]))
                ]),
                onPressed: () {
                  _controller.appleLogin();
                },
              ),
              SizedBox(
                height: ZtScreenAdaper.height(30),
              ),
              Container(
                //在此设置
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(ZtScreenAdaper.sp(30)),
                  gradient: const LinearGradient(colors: [
                    Color.fromRGBO(175, 243, 32, 1),
                    Color.fromRGBO(171, 238, 28, 1),
                  ]),
                ),
                child: ElevatedButton(
                  style: ButtonStyle(
                    padding: MaterialStateProperty.all(EdgeInsets.symmetric(
                        horizontal: ZtScreenAdaper.width(25),
                        vertical: ZtScreenAdaper.height(8))),
                    elevation: MaterialStateProperty.all(0),
                    backgroundColor:
                        MaterialStateProperty.all(Colors.transparent),
                  ),
                  onPressed: () async {
                    await _controller.fastLogin();
                  },
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Expanded(
                          child: Stack(alignment: Alignment.center, children: [
                        Positioned(
                            left: 0,
                            child: Image(
                              image: const AssetImage(
                                  'assets/images/fast_login.png'),
                              height: ZtScreenAdaper.width(26),
                              width: ZtScreenAdaper.width(26),
                            )),
                        SizedBox(
                          width: ZtScreenAdaper.width(30),
                          height: ZtScreenAdaper.height(40),
                        ),
                        Text(
                          'Fast Login',
                          style: TextStyle(
                              fontSize: ZtScreenAdaper.sp(18),
                              color: ZtAppTheme.darkText),
                        ),
                      ]))
                    ],
                  ),
                ),
              )
            ])));
  }

  Widget _buildTerm() {
    final fontSize = ZtScreenAdaper.sp(14);
    return Padding(
      padding: EdgeInsets.only(
          left: ZtScreenAdaper.width(10), right: ZtScreenAdaper.width(10)),
      child: Center(
        child: Wrap(
            alignment: WrapAlignment.start,
            crossAxisAlignment: WrapCrossAlignment.center,
            children: [
              Container(
                child: InkWell(
                  child: Obx(
                    () => Image(
                      image: AssetImage(
                          'assets/images/${!_controller.isAgreeTerm.value ? 'not-check' : 'checked'}.png'),
                      height: ZtScreenAdaper.width(18),
                      width: ZtScreenAdaper.width(18),
                    ),
                  ),
                  onTap: () {
                    _controller.isAgreeTerm.value =
                        !_controller.isAgreeTerm.value;
                  },
                ),
              ),
              SizedBox(
                width: ZtScreenAdaper.width(5),
              ),
              Text(
                'By using our App  you agree with',
                style: TextStyle(fontSize: ZtScreenAdaper.sp(fontSize)),
              ),
              Text(
                ' our ',
                style: TextStyle(fontSize: ZtScreenAdaper.sp(fontSize)),
              ),
              InkWell(
                onTap: _controller.onTermTap,
                child: Text('Term of Use',
                    style: TextStyle(
                        decoration: TextDecoration.underline, // 添加下划线
                        decorationColor: const Color.fromRGBO(255, 93, 150, 1),
                        color: const Color.fromRGBO(255, 93, 150, 1),
                        fontSize: ZtScreenAdaper.sp(fontSize))),
              ),
              Text(
                ' and ',
                style: TextStyle(fontSize: ZtScreenAdaper.sp(fontSize)),
              ),
              InkWell(
                  onTap: _controller.onPrivacyPolicyTap,
                  child: Text('Privacy Policy',
                      style: TextStyle(
                          decoration: TextDecoration.underline, // 添加下划线
                          decorationColor:
                              const Color.fromRGBO(255, 93, 150, 1),
                          color: const Color.fromRGBO(255, 93, 150, 1),
                          fontSize: ZtScreenAdaper.sp(fontSize)))),
            ]),
      ),
    );
  }
}
